<template>
  <div>
    <vxe-modal
      :title="$t('common.action.detail')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="60vw"
      height="480px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
    >
      <!-- 主体部分：详情展示 -->
      <el-descriptions
        ref="description"
        :column="1"
        :border="true"
        v-loading="loading"
        element-loading-text="加载中..."
        label-width="120px"
      >
        <!-- id -->
        <el-descriptions-item
          label-class-name="desc-label-width"
          :label="$t('common.field.id')"
          label-width="100"
        >
          {{ formData.id || '-' }}
        </el-descriptions-item>

        <!-- title -->
        <el-descriptions-item :label="$t('menu.dev.action.field.title')">
          {{ formData.title || '-' }}
        </el-descriptions-item>

        <!-- 函数名称 -->
        <el-descriptions-item :label="$t('menu.dev.action.field.method')">
          {{ formData.method || '-' }}
        </el-descriptions-item>

        <!-- type -->
        <el-descriptions-item :label="$t('menu.dev.action.field.type')">
          <ra-dict-label :code="codeValue" v-model="formData.type" />
        </el-descriptions-item>

        <!-- code -->
        <el-descriptions-item :label="$t('menu.dev.action.field.code')">
          {{ formData.code || '-' }}
        </el-descriptions-item>

        <!-- config -->
        <el-descriptions-item :label="$t('menu.dev.action.field.config')">
          <pre>{{ JSON.stringify(formData.config, null, 2) }}</pre>
        </el-descriptions-item>

        <!-- remark -->
        <el-descriptions-item :label="$t('common.field.remark')">
          {{ formData.remark || '-' }}
        </el-descriptions-item>

        <!-- status -->
        <el-descriptions-item :label="$t('common.field.status')">
          <ra-dict-label v-model="formData.status" code="status_options" />
        </el-descriptions-item>

        <!-- sort -->
        <el-descriptions-item :label="$t('common.field.sort')">
          {{ formData.sort || '-' }}
        </el-descriptions-item>

        <!-- 创建时间和更新时间（如果有的话） -->
        <el-descriptions-item
          :label="$t('common.field.create_time')"
          v-if="formData.createTime"
        >
          {{ formData.createTime }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('common.field.update_time')"
          v-if="formData.updateTime"
        >
          {{ formData.updateTime }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 空状态提示 -->
      <el-empty
        v-if="!loading && !formData.id"
        :description="$t('common.info.empty')"
        :image-size="100"
      />
    </vxe-modal>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

// 设置选项式 API 的内容
defineOptions({
  // 组件名称
  name: 'DetailModal',
  // 阻止透传非 props 属性
  inheritAttrs: false,
});

// 定义props
const props = defineProps({
  api: {
    type: Object,
    required: true,
    validator: (value) => {
      // 验证传入的api对象是否包含detail方法
      return typeof value.detail === 'function';
    },
  },
  menuInfo: {
    type: Object,
    required: true,
  },
});

// 是否显示载入效果
const loading = ref(false);
// 是否显示
const show = ref(false);
// 表单数据
const formData = ref({});

const codeValue = computed(() => {
  return props.menuInfo.template === 'table'
    ? 'sys_admin_action_options'
    : 'sys_form_action_options';
});

// 加载详情数据
const loadDetailData = async (id) => {
  try {
    loading.value = true;
    const { data } = await props.api.detail({ id });
    formData.value = data;
  } catch (error) {
    console.error('Error loading detail data:', error);
    ElMessage.error($t('common.message.info.load_failed'));
  } finally {
    loading.value = false;
  }
};

/**
 * 暴露方法
 */
defineExpose({
  show(id) {
    if (id) {
      show.value = true;
      loadDetailData(id);
    } else {
      console.warn($t('common.message.info.no_selected'));
      ElMessage.warning($t('common.message.info.no_selected'));
    }
  },
});
</script>

<style lang="scss" scoped>
.desc-label-width {
  width: 100px;
}

.content-text {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

// 加载状态样式
:deep(.el-loading-mask) {
  border-radius: 4px;
}
</style>
